<script lang="ts" setup>
import Son from './son.vue';
// import { ref } from 'vue'
// import { useIntersectionObserver } from '@vueuse/core'

// const target = ref<HTMLImageElement | null >(null)
// // const imgUrl = ref('')

// // 使用 useIntersectionObserver 获取目标元素是否出现在可视区, 当出现在可视区后给图片的 src 赋值即可
// // 参数1: target 告诉这个方法, 要监视的 dom 元素是谁
// // 参数2: 回填函数, 会携带一个数组给我们, 数组中只有一个对象, 对象中有一个属性: isIntersecting
// useIntersectionObserver(target, ([{isIntersecting}]) => {
//   // console.log(arr[0].isIntersecting)
//   if(isIntersecting) {
//     // imgUrl.value = 'https://portrait.gitee.com/uploads/avatars/user/3601/10805951_zhang-1201_1653535345.png!avatar100'
//     target.value!.src = 'https://portrait.gitee.com/uploads/avatars/user/3601/10805951_zhang-1201_1653535345.png!avatar100'
//   }
// })

</script>

<template>
 <div>
  <Son :money="100"></Son>
   </div>
   <img ref="target" alt="">
</template>

<style scoped>
  /* div {
    height: 5000px;
  } */
</style>